<template>
    <el-upload ref="uploadRef" class="avatar-uploader" :accept="'image/*'" :limit="1" :on-exceed="handleExceed"
        :action="uploadActionUrl()" :data="state.uploadParams" :headers="state.headers" :show-file-list="false"
        :before-upload="changeUpload" :on-success="handleAvatarSuccess" :on-error="handleAvatarError">
        <img v-if="state.ruleForm.coverImage" :src="state.ruleForm.coverImage" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
            <Plus />
        </el-icon>
    </el-upload>
</template>




<script setup lang="ts" name="systemDicDialog">
import { ElMessage, genFileId } from 'element-plus';
import { reactive, ref, watch, onMounted } from 'vue';
import { Plus } from '@element-plus/icons-vue'

import { Session } from '/@/utils/storage';

const porps = defineProps(['imgPath']);



const uploadRef = ref();


// 定义子组件向父组件传值/事件
const emit = defineEmits(['changeImg']);

const state = reactive({
    headers: { Authorization: Session.get('token') },
    ruleForm: {
        coverImage: ""
    },
    uploadParams: {
        remark: "商品图片资源", // 备注
        tag: "productImg", // 文件标签，随便输入
        fileAuthRange: "public" // resource 为资源文件 personal 个人文件  public 公开文件
    }
})



const changeUpload = (rawFile: any) => {
    // rawFile = rawFile.raw;
    if (rawFile.type.indexOf('image') < 0) {
        ElMessage.error('请上传图片文件')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片文件不能大于2M')
        return false
    }
    return true
}


const handleAvatarError = (error: any) => {
    state.ruleForm.coverImage = "";
    emit('changeImg', {
        coverImage: ""
    });
    ElMessage.warning('上传失败');
}


const handleExceed = (files: any) => {
    uploadRef.value!.clearFiles()
    const file = files[0] as any;
    file.uid = genFileId()
    uploadRef.value!.handleStart(file)
    uploadRef.value.submit();
}


const handleAvatarSuccess = async (
    response: { data: any; },
    uploadFile: any
) => {
    setTimeout(() => {
        // state.ruleForm.coverImage = `${import.meta.env.VITE_PHOTO_API_URL}/COMMON-SERVICE/public/mongo/gridfs/showFile?_id=${response.data}`;
        emit('changeImg', {
            coverImage:`${import.meta.env.VITE_PHOTO_API_URL}/COMMON-SERVICE/public/mongo/gridfs/showFile?_id=${response.data}`
        });
    }, 1000);
}




const uploadActionUrl = () => {
    return (
        import.meta.env.VITE_PHOTO_API_URL + "/COMMON-SERVICE/personal/mongo/gridfs/upload"
    );
};

// 页面加载时
onMounted(() => {
    state.ruleForm.coverImage = porps.imgPath || "";
});


watch(
    () => porps.imgPath,
    (newValue) => {
        state.ruleForm.coverImage = newValue;
    }, { immediate: true }
);






</script>


<style lang="scss">
.avatar-uploader {
    display: flex;
    justify-content: center;
    // width: 100%;
    // margin-right:20px;

    img {
        width: 178px;
        height:178px;
    }
}


.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>